<template>
  <div class="dashboard-container">
    <!-- 第一栏 -->
    <div style="margin-top: 15px">
      <el-input
        placeholder="请输入姓名"
        v-model="input"
        class="input-with-select"
      >
        <el-select v-model="select" slot="prepend" placeholder="资信等级查询（默认）">
          <el-option label="资信等级查询（默认）" value="1"></el-option>
          <el-option label="信用等级查询" value="2"></el-option>
        </el-select>
        <el-button
          slot="append"
          icon="el-icon-search"
          @click="searchCertify"
        ></el-button>
      </el-input>
    </div>
    <!-- 第二栏 -->
    <div class="image_preview" v-if="url">
      <el-image
        style="width: 600px; height: 460px"
        :src="url"
        :preview-src-list="srcList"
      >
        <div slot="placeholder" class="image-slot">
          加载中<span class="dot">...</span>
        </div>
      </el-image>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { getImage, calImage } from "@/api/certify/credit";

export default {
  name: "Dashboard",
  data() {
    return {
      // 搜索框
      input: "",
      select: "",
      // 证书地址
      url: undefined,
      srcList: undefined,
    };
  },
  computed: {
    ...mapGetters(["name"]),
  },
  created() {},
  methods: {
    searchCertify() {
      if (this.input === "") {
        this.$message.warning("请输入要查询的姓名！");
        return;
      }
      this.url = undefined;
      this.srcList = undefined;
      var timestamp = new Date().getTime(); //获取进入项目的时间戳
      calImage({ user: this.input,type: this.select }).then((res) => {
        if (res.data === 1) {
          this.$message.info("请稍等5秒左右，后台正在计算并生成证书！");
          setTimeout(() => {
            this.url = `http://localhost:8888/img/certify?v=${timestamp}`;
            this.srcList = [`http://localhost:8888/img/certify?v=${timestamp}`];
          }, 6000);
        } else if(res.data === -1){
          this.$message.warning("该用户尚未完善相关信息！(若已完善，请联系管理员确认资信等级)");
        }else {
          this.$message.warning("该用户未注册本系统！");
        }
      }).catch(()=>{
        this.$message.error("系统异常，请联系管理员！");
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 40px 50px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.el-select{
  width: 200px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
.image_preview {
  margin: 50px;
  position: absolute;
  top: 20%;
  left: 25%;
}
</style>
